<template>
  <div id="areaDiv">
    <div class="tableDiv">
      <div class="header">
        <Button v-if="modulesArr.indexOf('adminInsert')>0" class="buttonDiv addButton" type="warning" icon="md-add" @click="insertMsg">添加</Button>
      </div>
      <div class="body">
        <Table
          :loading="tableLoading"
          :columns="tableColumns"
          :data="tableData"
          @on-selection-change="tableChose"
          border
        >
          <template
            slot="action"
            slot-scope="{ row ,index }">
            <!--升序-->
<!--            <Tooltip  placement="top" trigger="hover" content="升序">-->
              <Button
                shape="circle"
                size="small"
                icon="ios-arrow-up"
                type="primary"
                style="margin-right: 15px"
                v-if="modulesArr.indexOf('adminUpdate')>0"
                @click="updateLineSort(index,'asc')">
              </Button>
<!--            </Tooltip >-->
            <!--降序-->
<!--            <Tooltip placement="top" trigger="hover" content="降序">-->
              <Button
                shape="circle"
                size="small"
                icon="ios-arrow-down"
                type="primary"
                style="margin-right: 15px"
                v-if="modulesArr.indexOf('adminUpdate')>0"
                @click="updateLineSort(index,'desc')">
              </Button>
<!--            </Tooltip>-->
            <!--修改-->
            <Button v-if="modulesArr.indexOf('adminUpdate')>0" shape="circle" size="small" icon="md-create" type="success" @click="updateLine(row)" style="margin-right: 15px"></Button>
            <!--删除-->
            <Button v-if="modulesArr.indexOf('adminDelete')>0" shape="circle" size="small" icon="ios-trash" type="error" @click="deleteLine(row)"></Button>
          </template>
        </Table>
      </div>
      <div class="footer">
        <div class="commonFooterBtn">
          <Button v-if="modulesArr.indexOf('adminDelete')>0" class="buttonDiv" :disabled="tableChoseList.length<=0" @click="deleteChose" icon="ios-trash-outline" type="error">删除</Button>
        </div>
        <div class="commonFooterPage">
          <Page class="pageLine" :total="pageMsg.pageTatol" :page-size="pageMsg.pageSize" :current="pageMsg.pageNo" @on-change="pageChange"/>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import qs from 'qs';
  import { mapState, mapMutations } from "vuex";

  export default {
    name: "index",
    computed: {
      ...mapState({ modulesArr: state => state.app.modulesArr })
    },
    data(){
      const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请填写地区'));
        } else {
          this.$app.post('/area/examineArea', {
            areaName:value
          }).then((res)=>{
            if(res.data.code==0){
              callback();
            }else{
              callback(new Error('重复地区'));
            }
            // console.log(res);
          }).catch((res)=>{
            //console.log(response);
          });

        }
      };
      return{
        addModal:false,
        updateModal:false,
        tableLoading:false,
        tableChoseList:[],
        pageMsg:{
          pageNo:1,//当前页
          pageSize:10,//每页行数
          pageTatol:12,//总数
        },
        formModal:{
          pkid:0,
          areaName:'',
          isDefault:0,
        },
        isDefault: false,
        formMsgRule:{
          areaName: [
            { required: true, message: '请输入区域名', trigger: 'blur' },
            { validator: validatePass, trigger: "blur" },
          ],
          isDefault:[
            { required: true}
          ],
        },
        tableData:[
          {pkid:0,areaName:"亚洲1"},
          {pkid:1,areaName:"亚洲2"},
          {pkid:2,areaName:"亚洲3"},
          {pkid:3,areaName:"亚洲4"}
        ],
        tableColumns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title:"管理员账号",
            key:"userName",
            align: 'center'
          },
          {
            title:"名称",
            key:"userNick",
            align: 'center'
          },
          {
            title: "操作",
            align: "center",
            slot: "action",
            width: 200,
          },
        ]
      }
    },
    methods:{
      //选择框选择
      tableChose(selection, row){
        this.tableChoseList=selection
      },
      //添加
      insertMsg(row){
        this.$router.push({
          name:"adminInsert",
          query:{

          }
        })
      },
      updateLineSort(index,sort){
        var thisRow=this.tableData[index];
        var params=new FormData();
        params.append("pkid",thisRow.pkid);
        params.append("sort",thisRow.sort);
        params.append("type",sort);
        var a={
          pkid:thisRow.pkid,
            sort:thisRow.sort,
          type:sort
        }
        let that=this;
        this.$app.post('/tadmin/updateAdminSort',a).then((res)=>{
          if(res.data.code==0){
            that.$Message.success("调整成功");
            that.getAllTableData();
            // that.tableChoseList=[];
          }else{
            that.$Message.error("调整失败")
          }
          // console.log(res);
        })
      },
      //点击修改按钮
      updateLine(row){
        this.$router.push({
          name:"adminUpdate",
          query:{
            adminId:row.pkid
          }
        })
      },
      deleteMethod(ids){
        let that=this;
        let params={pkids:ids};
        // params=qs.stringify(params, {arrayFormat: 'repeat'});
        // console.log()
        return new Promise((resolve,reject) => {
          this.$app.post('/tadmin/deleteByIds', params ).then((res)=>{
            if(res.data.code==0){
              resolve()
            }else{
              that.$Message.error("删除失败")
              reject();
            }
            // console.log(res);
          }).catch((res)=>{

            reject(res);
          })
        })
      },
      //删除单选
      deleteLine(row){
        // console.log("点击了删除::",row);
        let that=this;
        // console.log("删除：：",);
        this.deleteMethod([row.pkid]).then(()=>{
          that.$Message.success("删除成功");
          that.getAllTableData();
        }).catch(()=>{
          that.$Message.error("删除失败")
        })
      },
      //删除多选
      deleteChose(){
        let that=this;
        // console.log("删除：：",);

        this.deleteMethod(that.tableChoseList.map(item => item.pkid)).then((res)=> {
          that.$Message.success("删除成功");
          that.getAllTableData();
          that.tableChoseList = [];
        })
        // this.$app.post('/tadmin/deleteByIds', {
        //   pkids:
        // }).then((res)=>{
        //   if(res.data.code==0){
        //     that.$Message.success("删除成功");
        //     that.getAllTableData();
        //     that.tableChoseList=[];
        //   }else{
        //     that.$Message.error("删除失败")
        //   }
        //   // console.log(res);
        // }).catch((res)=>{
        //   //console.log(response);
        // });

      },
      pageChange(pageNum){
        this.pageMsg.pageNo=pageNum
        this.getAllTableData();
      },
      getAllTableData(){
        var that=this;

        this.$app.post('/tadmin/getAllAdmin', {
          pageNo:that.pageMsg.pageNo,
          pageSize: that.pageMsg.pageSize
        }).then((res)=>{
          if(res.data.code==0){
            that.tableData=res.data.data.list;
            that.pageMsg.pageTatol=res.data.data.total;
          }
          // console.log(res);
        }).catch((res)=>{
          //console.log(response);
        });
      },
      //修改默认值
      undateDefault(row){
        let that=this;

        this.$app.post('/area/updateDefaultArea', {
          pkid:row.pkid
        }).then((res)=>{
          if(res.data.code==0){
            that.$Message.success("修改成功");
            that.getAllTableData();
          }
          // console.log(res);
        }).catch((res)=>{
          //console.log(response);
        });
      },
    },
    mounted() {
      this.getAllTableData();
    }
  }
</script>

<style lang="less" scoped>
  #areaDiv{
    width: 100%;
    height: 100%;

    &>.tableDiv{
      .header{
        &>.buttonDiv{
          margin: .5rem 0 .5rem .5rem;
        }
        &>.addButton{

        }
      }

      .body{
        margin:0 0.5rem;
      }
      .footer{
        .commonFooterBtn,.commonFooterPage{
          margin: .5rem;
        }
        .commonFooterBtn{
          float: left;
        }
        .commonFooterPage{
          float: right;
        }
      }
    }
  }
</style>
